<template>
  <view>
    <view class="totalbox">
      <text style="font-size: 40rpx; margin-top: 30rpx;">请选择下列药材图片的名称</text>
      <view class="secondbox">
        <view class="picturebox">
          <image :src="currentmedicineIcon" mode="aspectFill" style="width: 400rpx;height: 400rpx;"></image>
        </view>
        <view class="radiobox">
          <radio-group @change="handleRadioChange">
            <label v-for="(item,index) in randomFourList" :key="index">
              <radio :value="item.mname" :disabled="!radioEnabled" :checked="radioChecked === item.mname">
                <text style="color:black;font-size: 40rpx;">{{item.mname}}</text>
              </radio>
            </label>
          </radio-group>
        </view>
      </view>
        
    </view>
    <button @click="reNewTotal">下一题</button>
    <view class="answerbox" v-if="showAnswerBox">
      <text style="font-size: 50rpx;">{{randomOneList.mname}}</text>
      <text @click="goToDetailPage(randomOneList.id)" style="margin-left: 10rpx;">了解详情</text>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        totalList:[],
        currentmedicineIcon: '',
        randomFourList:[],
        randomOneList:[],
        selectedMname:'',
        selectedId:'',
        showAnswerBox:false,
        radioBoxOpacity:1,//radiobox的透明都
        radioEnabled:true,//标记radio是否可用
        radioChecked:'' //用于记录radio选中状
      }
    },
    onLoad() {
      this.totalData()
    },
    methods: {
      //获取全部药材
      totalData(){
        this.$request.get('/medicines/selectAll').then(res => {
          if (res && res.data) {
            this.totalList = res.data;
            // console.log(res.data);
            //随机获取四个数据
            const randomFourData  = this.getRandomFourData(this.totalList);
            this.randomFourList = randomFourData;
            //四选一个药材图片
            const randomOneData = this.getRandomOneData(this.randomFourList);
            this.randomOneList = randomOneData; 
            this.currentmedicineIcon = randomOneData.icon;
            
          }else{
            console.error('No data received or data is not in expected format');
          }
        }).catch(error => {
          console.error('Error fetching data:',error);
        });
      },
      //从totalList随机获取四个数据
      getRandomFourData(dataList) {
        const result = [];
        const length = dataList.length;
        const usedIndexes = new Set();
        while (result.length < 4 && usedIndexes.size < length) {
          const randomIndex = Math.floor(Math.random() * length);
          if (!usedIndexes.has(randomIndex)) {
            usedIndexes.add(randomIndex);
            result.push(dataList[randomIndex]);
            }
        }
        return result;
      },
      // 四数据选一个
      getRandomOneData(dataArray) {
        const randomIndex = Math.floor(Math.random() * dataArray.length);
        return dataArray[randomIndex];
      },
      handleRadioChange(e){
        this.showAnswerBox = true;
        this.radioBoxOpacity = 0.2;
        this.radioEnabled = false;
        this.$forceUpdate();
      },
      goToDetailPage(id){
        uni.navigateTo({
          url:'/pages/detail/detail?id='+id
        })
      },
      //全部重置
      reNewTotal(){
        
        this.showAnswerBox = false;
        this.radioBoxOpacity = 1;
        this.radioEnabled = true;
        this.selectedMname = '';
        this.selectedId = '';
        this.radioChecked = '';
        this.totalData();
        
      }
   }   
  }
</script>

<style>
.totalbox{
  height:900rpx;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  flex-direction: column;
}
.secondbox{

}
.picturebox{
  width: 400rpx;
  height: 400rpx;
  background-color: #000000;
  margin-top: 40rpx;
}
.radiobox{
  margin-top: 60rpx;
  opacity: v-bind(radioBoxOpacity);
}
.radiobox label {
  display: block;
  margin-bottom: 20rpx; 
}
.answerbox{
  margin-top: 50rpx;
  text-align: center;
}
</style>
